<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="unsemantic/stylesheets/unsemantic-grid-responsive.css" rel="stylesheet" type="text/css"/>
        <link href="jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
        <script src="jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"></script>
        <style type="text/css">
            .grid-container>[class*=grid-] {border: 1px solid #dd514c;}
            .grid-container>[class*=push-] {background-color: green}
            .grid-container>[class*=pull-] {background-color: pink}
        </style>
    </head>
    <body>
        <div class="grid-container">
            <div class="grid-100 align-center">
                <h3>
                    Push &amp; Pull (for SEO)
                </h3>
                <p>
                    Green = push. Pink = pull.
                </p>
            </div>
            <div class="grid-10 push-90 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10% g1
                    </b>
                    <b class="hide-on-desktop">
                        50% g1
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10% g2
                    </b>
                    <b class="hide-on-desktop">
                        50% g2
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10% g3
                    </b>
                    <b class="hide-on-desktop">
                        50% g3
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 push-30 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10% g4
                    </b>
                    <b class="hide-on-desktop">
                        50% g4
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10% g5
                    </b>
                    <b class="hide-on-desktop">
                        50% g5
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10% g6
                    </b>
                    <b class="hide-on-desktop">
                        50% g6
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 pull-30 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10% g7
                    </b>
                    <b class="hide-on-desktop">
                        50% g7
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10% g8
                    </b>
                    <b class="hide-on-desktop">
                        50% g8
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-10 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10% g9
                    </b>
                    <b class="hide-on-desktop">
                        50% g9
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <!--hr-->
            <div class="grid-10 pull-90 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        10% g11
                    </b>
                    <b class="hide-on-desktop">
                        50% g11
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-20 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        20% g12
                    </b>
                    <b class="hide-on-desktop">
                        50% g12
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-20 push-60 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        20% g13
                    </b>
                    <b class="hide-on-desktop">
                        50% g13
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-20 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        20% g14
                    </b>
                    <b class="hide-on-desktop">
                        50% g14
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-20 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        20% g15
                    </b>
                    <b class="hide-on-desktop">
                        50% g15
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-20 pull-60 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        20% g16
                    </b>
                    <b class="hide-on-desktop">
                        50% g16
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <!--hr-->
            <div class="grid-25 push-50 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        25% g21
                    </b>
                    <b class="hide-on-desktop">
                        50% g21
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-25 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        25% g22
                    </b>
                    <b class="hide-on-desktop">
                        50% g22
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-25 pull-50 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        25% g23
                    </b>
                    <b class="hide-on-desktop">
                        50% g23
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-25 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        25% g24
                    </b>
                    <b class="hide-on-desktop">
                        50% g24
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <!--hr-->
            <div class="grid-66 push-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        66% g31
                    </b>
                    <b class="hide-on-desktop">
                        50% g31
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-33 pull-66 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33% g32
                    </b>
                    <b class="hide-on-desktop">
                        50% g32
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <!--hr-->
            <div class="grid-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33% g41
                    </b>
                    <b class="hide-on-desktop">
                        50% g41
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <div class="grid-33 push-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33% g42
                    </b>
                    <b class="hide-on-desktop">
                        50% g42
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
            <!--hr-->
            <div class="grid-33 pull-33 mobile-grid-50">
                <section class="example-block">
                    <b class="hide-on-mobile">
                        33% g51
                    </b>
                    <b class="hide-on-desktop">
                        50% g51
                    </b>
                    <span class="dynamic-px-width"></span>
                </section>
            </div>
        </div>
    </body>
</html>
